<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>不定尺寸图片在容器内垂直居中</title>
  <style>
    .content { width: 1024px; height: 576px; line-height: 1.5; 
      position: absolute; 
      left: 0; top: 0; right: 0; bottom: 0; 
      margin: auto; 
      box-sizing: border-box; 
      padding-left: 50px; 
      padding-right: 50px; 
      font-size: 24px; font-family: 'microsoft yahei'; overflow: hidden;
      border: 1px solid #cc0000;
     }
    .test-vm {
      height: 256px;
      background-color: #eee;
      text-align: center;
    }
    /*
    1.inline-block化,这里设置span
    2. 插入辅助元素<i>,
    3. 让图片和<i>元素同时 vertical-align:middle
    */
    span { display: inline-block; vertical-align: middle;}
    i { display: inline-block; height: 100%; vertical-align: middle;}
  </style>
</head>
<body>
  <div class="content">
    <p class="test-vm"><span>共1行</span><i></i></p>
  </div>
</body>
</html>